<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .banner-card {
         width: 100%;
         height: 250px;
         line-height: 250px;
         background: #ffffff;
         position: relative;
      }

      .banner-card ul {
         width: 700px;
         height: 100%;
         margin: 0 auto;
         text-align: center;
         position: relative;
      }

      .banner-card li {
         width: 150px;
         height: 200px;
         position: absolute;
         top: 25px;
         list-style-type: none;
         -webkit-transition: 0.3s;
         -moz-transition: 0.3s;
         -ms-transition: 0.3s;
         -o-transition: 0.3s;
         transition: 0.3s;
         cursor: pointer;
      }

      .banner-card li img {
         display: inline-block;
         width: 100%;
         height: 100%;
      }

      .two {
         z-index: 2;
         left: 175px;
         -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);
         background-color: rgba(0, 0, 0, 0.5);
      }

      .three {
         left: 275px;
         z-index: 3;
         -webkit-transform: scale(1);
         -moz-transform: scale(1);
         -ms-transform: scale(1);
         -o-transform: scale(1);
         transform: scale(1);
      }

      .two::before {
         content: ' ';
         position: absolute;
         left: 0;
         top: 0;
         width: 150px;
         height: 200px;
         background-color: rgba(0, 0, 0, 0.5);
      }

      .four {
         z-index: 2;
         left: 375px;
         -webkit-transform: scale(0.9);
         -moz-transform: scale(0.9);
         -ms-transform: scale(0.9);
         -o-transform: scale(0.9);
         transform: scale(0.9);


      }

      .four::before {
         content: ' ';
         position: absolute;
         left: 0;
         top: 0;
         width: 150px;
         height: 200px;
         background-color: rgba(0, 0, 0, 0.5);
      }

      .other {
         left: 475px;
         z-index: -1;
         -webkit-transform: scale(0.8);
         -moz-transform: scale(0.8);
         -ms-transform: scale(0.8);
         -o-transform: scale(0.8);
         opacity: 0;
      }

      .banner-card div {
         transition: 0.3s;
         position: absolute;
         top: 0;
         cursor: pointer;
         opacity: 0;
      }

      .banner-card div span {
         display: inline-block;
         font-size: 25px;
      }

      .left-btn {
         left: 20px;
      }

      .right-btn {
         right: 20px;
      }
   </style>
</head>

<body>
   
</body>
<script>
   // 可传入一个对象， 对象属性包含classArray: 一个数组。leftSlider: 布尔值
   new bannerCard();
</script>

</html>